<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/template.xhtml">

    <ui:define name="title"><h:outputText value="Create Exam Paper" /></ui:define>
    <ui:define name="header"><h:outputText value="Create Exam Paper" /></ui:define>
    
    <ui:define name="content">
        <p:growl id="growlMsg"/>
        <h:form id="examPapersForm">
            
            <hr/>
           <p:dataTable var="examPaper" value="#{examPaperView.examPapers}" rows="10" id="examPaperTable"
                         paginator="false"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         selection="#{examPaperView.selectedExamPaper}" 
                         rowKey="#{examPaper.id}"
                         >
                <p:column selectionMode="single" style="width:16px;text-align:center"/>

                <p:column headerText="Exam Paper Name">
                    <h:outputText value="#{examPaper.name}" />
                </p:column>
                
                <p:column headerText="Module">
                    <h:outputText value="#{examPaper.moduleId.name}" />
                </p:column>
                
                <p:column style="width:32px;text-align: center">
                    <p:commandButton update=":editExamPaperForm" icon="ui-icon-pencil" title="Edit" oncomplete="PF('editExamPaperDialog').show()">
                       <f:setPropertyActionListener value="#{examPaper}" target="#{examPaperView.selectedExamPaper}" />
                       <p:resetInput target=":editExamPaperForm" />
                   </p:commandButton>
                </p:column>

                <f:facet name="footer">
                    <p:commandButton actionListener="#{examPaperView.createBlankExamPaper()}" value="Create Exam Paper" update=":createExamPaperForm" >
                        <p:resetInput target=":createExamPaperForm" /> 
                    </p:commandButton>
                </f:facet>
            </p:dataTable>            
            <hr/>
            
        </h:form>         
      
            
        <h:form id="createExamPaperForm">

            <p:panelGrid id="displayNewExamPaper" columns="2" rendered="#{examPaperView.newExamPaper ne null}" style="width:100%">   
                <h:outputText value="Exam Paper Name:" style="width: 300px"></h:outputText>
                <h:panelGroup>
                    <p:inputText value="#{examPaperView.examPaperName}" required="true" requiredMessage="Please enter exam paper name." id="name"/>
                    <p:message for="name"/>    
                </h:panelGroup>
                <h:outputText value="Module:"></h:outputText>
                <h:panelGroup>
                    <h:selectOneMenu id="module" value="#{examPaperView.moduleId}" title="Module" required="true" requiredMessage="Please select a module.">
                        <f:selectItems value="#{examPaperView.itemsAvailableSelectOne}" />
                    </h:selectOneMenu>
                </h:panelGroup>  
                <h:outputText value=""></h:outputText>
                <h:commandLink value="Save this exam info" actionListener="#{examPaperView.saveCurrentExamInfo()}">
                    <f:ajax execute="@form" render="@form :createExamPaperProgressForm" /> 
                </h:commandLink>             

            </p:panelGrid>                

            <p:panelGrid id="displayNewSection" columns="2" rendered="#{!empty examPaperView.examPaperName}" style="width:100%">
                <h:outputText value="Section Name:" style="width: 200px"></h:outputText>
                <h:panelGroup>
                    <p:inputText value="#{examPaperView.currentSection.name}" required="true" requiredMessage="Please enter section name." id="sectionName"/>
                    <p:message for="sectionName"/>    
                </h:panelGroup>             
                <h:outputText value="Type:"></h:outputText>
                <h:panelGroup>
                    <h:selectOneMenu id="sectionType" value="#{examPaperView.currentSection.type}" title="Section Type" required="true" requiredMessage="Please select the section type.">
                        <f:selectItems value="#{examPaperView.sectionTypeItemsAvailableOne}"/>
                    </h:selectOneMenu>
                </h:panelGroup>
                <h:outputText value="Total Marks:"></h:outputText>
                <h:panelGroup>
                    <p:inputText value="#{examPaperView.currentSection.totalMarks}" required="true" requiredMessage="Please enter exam paper name." id="totalMarks"/>
                    <p:message for="totalMarks"/>    
                </h:panelGroup>
                <h:outputText value="Tags:"></h:outputText>
                <h:panelGroup>
                    <p:autoComplete multiple="true" value="#{examPaperView.selectedSubjectTags}" completeMethod="#{examPaperView.completeSubjectTags}" id="tags" 
                                    var="tag" itemLabel="#{tag.name}" itemValue="#{tag}" converter="tagConverter" forceSelection="true"> 
                        
                        <p:column>
                            <h:outputText value="#{tag.name}" />
                        </p:column>
                    </p:autoComplete>
                      
                </h:panelGroup>
                <h:outputText value=""></h:outputText>
                <h:commandLink value="Save this section info" action="#{examPaperView.saveCurrentSection()}"> 
                    <f:ajax execute="@form" render="@form :createExamPaperProgressForm tags" />
                </h:commandLink>
            </p:panelGrid>              
            
            <p:panelGrid id="displayQuestionSection" columns="1" style="width:100%" rendered="#{examPaperView.currentSection.type eq 'Manual'}">
                <p:dataTable value="#{examPaperView.availableQuestions}" selection="#{examPaperView.selectedQuestions}" var="question" rowKey="#{question.id}">
                    <f:facet name="header">Select Section Questions</f:facet>
                    <p:column headerText="Intro"> #{question.text} </p:column>
                    <p:column headerText="Questions"> <h:outputText value="#{question.questionPartsString}" escape="false"/> </p:column>
                    <p:column headerText="Mark"  style="width:5%; alignment-adjust: central"> #{question.mark} </p:column>
                    <p:column selectionMode="multiple" style="width:2%" />                    
                </p:dataTable>
                <p:messages/>
                <h:commandLink value="Save selected questions" action="#{examPaperView.saveSelectedQuestions}" rendered="#{!empty examPaperView.availableQuestions}" style="float: right" />
            </p:panelGrid>

            <div align="center">
                <p:commandButton value="Create" update="@all"                                
                             actionListener="#{examPaperView.createExamPaper()}" rendered="#{examPaperView.newExamPaper ne null}" immediate="true"/>
                <p:commandButton value="Reset" update="@all" actionListener="#{examPaperView.resetExamPaper()}" rendered="#{examPaperView.newExamPaper ne null}" immediate="true"/>
            </div>
            
            
        </h:form>
        <hr/>    
        <h:form id="createExamPaperProgressForm">
            <h:panelGroup id="createExamPaperProgressPanel" rendered="#{examPaperView.newExamPaper.name ne null}">
                
                <p:panelGrid columns="2">
                    Exam Paper Name:  <h:outputText value="#{examPaperView.newExamPaper.name}" />
                    Module:           <h:outputText value="#{examPaperView.newExamPaper.moduleId.name}" />
                </p:panelGrid>
                
                <p:dataTable var="section" value="#{examPaperView.newExamPaper.sectionCollection}">                    
                    <p:column headerText="Section Info">
                        Name:           <h:outputText value="#{section.name}"/> <br />
                        Type:           <h:outputText value="#{section.type}"/> <br />
                        Total Marks:    <h:outputText value="#{section.totalMarks}"/> <br />
                        Tags:           <h:outputText value="#{section.commaSeparatedTags}"/> <b />
                    </p:column>
                    <p:column headerText="Questions">                       
                       <h:outputText value="#{section.questionListString}" escape="false"/>                            
                    </p:column>
                </p:dataTable>
            </h:panelGroup>

        </h:form>
        
              
       <p:dialog header="Edit Exam Paper" widgetVar="editExamPaperDialog" resizable="false" >
            
            <h:form id="editExamPaperForm">
                <h:inputHidden value="#{examPaperView.selectedExamPaper.id}" id="id"/>
                <p:panelGrid id="displayEditExamPaper" columns="2" rendered="#{not empty examPaperView.selectedExamPaper}">  
                    
                    <h:outputText value="Exam Paper Name"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examPaperView.selectedExamPaper.name}" required="true" requiredMessage="Please Enter Exam Paper Name." id="name"/>
                        <p:message for="name"/>    
                    </h:panelGroup>
                    
                    <h:outputText value="Deprecated(Y/N)"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{examPaperView.selectedExamPaper.deprecated}" 
                                     required="false"
                                     id="deprecated"/>
                        <p:message for="deprecated"/>   
                    </h:panelGroup>
                </p:panelGrid>
                
                <p:commandButton value="Edit" update=":editExamPaperForm, :examPapersForm"  
                                 oncomplete=" handleSubmitRequest(xhr, status, args, 'editExamPaperDialog','editExamPaperForm');" 
                                 actionListener="#{examPaperView.editExamPaper()}"/>
                <p:commandButton type="reset" value="Reset"></p:commandButton>
            </h:form>
            
        </p:dialog>
        
        <script type="text/javascript">  
            function handleSubmitRequest(xhr, status, args, dialogName, formName) {  
                    dialog = jQuery('#'+dialogName);
                if(args.validationFailed) {  
                    dialog.effect("shake", { times:3 }, 100);  
                } else {
                    clearForm(formName);                    
                    PF('editExamPaperDialog').hide();
                }  
            }
            function clearForm(formName){
                jQuery('#'+formName).each(function(){
                        this.reset();
                });
            }

        </script> 
</ui:define>

</ui:composition>

